'use strict';

//## HTML练习题一
// 获取<p>javascript</p>节点:
                // var p = document.getElementById("test-js");
                // console.log(p);

                // // 修改文本为JavaScript:
                // p.innerText="JavaScript";
                // console.log(p);

                // // 修改CSS为: color: #ff0000, font-weight: bold
                // p.style.color=" #ff0000";
                // p.style.fontWeight="bold";





//## HTML练习题二
    /*
    <ol id="test-list">
        <li class="lang">Scheme</li>
        <li class="lang">JavaScript</li>
        <li class="lang">Python</li>
        <li class="lang">Ruby</li>
        <li class="lang">Haskell</li>
    </ol>
    */
//A B C D E F G H I J K L N M O P Q R S T U V W X Y Z
//    按字符串顺序重新排序DOM节点：

                // var ol=document.getElementById("test-list");
                // console.log(ol);
                // var arr=[];
                // for (let i = 0; i < ol.children.length; i++) {
                //     arr.push(ol.children[i].innerText);

                // }
                // arr.sort();
                // console.log(arr);

                // for (let i = 0; i < ol.children.length; i++) {
                //     ol.children[i].innerText=arr[i];

                
                // }
                // console.log(ol);




// ## HTML练习题三
    // <!-- HTML结构 -->

    // <ul id="test-list">
    //     <li>JavaScript</li>
    //     <li>Swift</li>——不相关
    //     <li>HTML</li>
    //     <li>ANSIC</li>——不相关
    //     <li>CSS</li>
    //     <li>DirectX</li>——不相关
    // </ul>

    // 把与Web开发技术不相关的节点删掉：

  
                // var ul=document.getElementById("test-list")
                // console.log(ul);
                
                // for (let i = 0; i < ul.children.length; i++) {
                //     if (ul.children[i].innerText==="Swift"||
                //         ul.children[i].innerText==="ANSIC"||
                //         ul.children[i].innerText==="DirectX") {

                //         ul.removeChild(ul.children[i]);
                //        i--;//每删除一个节点children[i]都会动态改变
                //     } 
                
                // }
                // console.log(ul);






    //## HTML练习题四
    //<!-- HTML结构 -->
    // <div id="test-div">
    // <div class="c-red">
    //     <p id="test-p">JavaScript</p>
    //     <p>Java</p>
    // </div>
    // <div class="c-red c-green">
    //     <p>Python</p>
    //     <p>Ruby</p>
    //     <p>Swift</p>
    // </div>
    // <div class="c-green">
    //     <p>Scheme</p>
    //     <p>Haskell</p>
    // </div>
    // </div>


                // //请选择出指定条件的节点：
                // // // 选择<p>JavaScript</p>:
                // var js = document.getElementById("test-p");
                // console.log(js);

                // // // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
                // var arr = document.getElementsByTagName("div")[2]
                // console.log(arr);

                // // // 选择<p>Haskell</p>:
                // var haskell =document.getElementsByTagName("div")[3].children[1]
                // console.log(haskell);



//## HTML练习题六


    //<!-- HTML结构 -->
//     <div id="test-jquery">
//         <p id="para-1" class="color-red">JavaScript</p>
//         <p id="para-2" class="color-green">Haskell</p>
//         <p class="color-red color-green">Erlang</p>
//         <p name="name" class="color-black">Python</p>
//         <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
//             <legend>注册新用户</legend>
//             <fieldset>
//                 <p><label>名字: <input name="name"></label></p>
//                 <p><label>邮件: <input name="email"></label></p>
//                 <p><label>口令: <input name="password" type="password"></label></p>
//                 <p><button type="submit">注册</button></p>
//             </fieldset>
//         </form>
//     </div>

// 使用jQuery选择器分别选出指定元素：

    //+ 仅选择JavaScript
    var JavaScript = $("#para-1");//用id
    var JavaScript = $("div")[0];

    //+ 仅选择Erlang

    //+ 选择JavaScript和Erlang

    //+ 选择所有编程语言

    //+ 选择名字input

    //+ 选择邮件和名字input 





